<template>
	<div style="width: 100%;height:100%; overflow: hidden;" @dblclick="click">
		<vue-aliplayer-v2 @ready="ready" v-if="!String.isEmptyOrNUll(options.playauth)" id="vue-aliplayer-v2" ref="player" :options="options"
		 @timeupdate="timeupdate1" @ended="ended" @play='playEvent' />
        <img v-else src="/static/img/skin.jpg" width="100%" height="100%">
	</div>
</template>

<script>
	// import VueAliplayer from 'vue-aliplayer'
	// import VueAliplayerV2 from 'vue-aliplayer-v2';
	var _this;
	export default {
		name: 'player',
		data() {
			return {
				'cTime': '0',
				isready: false,
				options: { //配置项
					height: '100%',
					width: '100%',
					useH5Prism: true,
					vid: "",
					playauth: "",
					autoplay: 'flase',
					"skinLayout": [{
							"name": "bigPlayButton",
							"align": "blabs",
							"x": 30,
							"y": 80
						},
						{
							"name": "H5Loading",
							"align": "cc"
						},
						{
							"name": "tooltip",
							"align": "blabs",
							"x": 0,
							"y": 56
						},
						{
							"name": "controlBar",
							"align": "blabs",
							"x": 0,
							"y": 0,
							"children": [{
									"name": "playButton",
									"align": "tl",
									"x": 15,
									"y": 12
								},
								{
									"name": "timeDisplay",
									"align": "tl",
									"x": 10,
									"y": 5
								},
								{
									"name": "fullScreenButton",
									"align": "tr",
									"x": 10,
									"y": 12
								},
								{
									"name": "volume",
									"align": "tr",
									"x": 5,
									"y": 12
								},
								{
									"name": "setting",
									"align": "tr",
									"x": 15,
									"y": 12
								},
							]
						}
					]

				},
			}
		},
		props: ["timeupdate", "ended", 'step','playEvent'],
		created: function() {
			_this = this;
		},
		mounted: function() {},
		destroyed: function() {
			var player = this.$refs.player;
			if (player) {
				player.dispose();
			}

		},
		methods: {
			goback: function() {
				_this.$router.push({
					path: "/home"
				});
			},
			ready: function() {
				if (this.seek != undefined) {
					var player = this.$refs.player;
					player.seek(this.seek);
					player.pause();
					this.isready = true;
				}
			},
			replayByVidAndPlayAuth: function(vid, playauth, playTime) {
				this.options.vid = vid;
				this.options.playauth = playauth;
				this.seek = playTime;
				var player = this.$refs.player;
				if (player) {
					player.replayByVidAndPlayAuth(vid, playauth);
				}
			},
			play: function() {
				var player = this.$refs.player;
				if (player) {
					player.play();
				}
			},
			pause: function() {
				var player = this.$refs.player;
				if (player) {
					player.pause();
				}
			},
			getDuration: function() {
				var player = this.$refs.player;
				if (player) {
					return player.getDuration();
				}
				return 0;
			},

			timeupdate1: function(e) {
				var player = this.$refs.player;
				this.cTime = parseInt(player.getCurrentTime());
			},
			getCurrentTime: function() {
				var player = this.$refs.player;
				if (player == undefined) return 0;
				return parseInt(player.getCurrentTime());
			},
			requestFullScreen: function() {
				var player = this.$refs.player;
				player.requestFullScreen();
			},
			click: function() {
				var player = this.$refs.player;
				if (player == undefined) return;
				var bl = player.getIsFullScreen();
				if (!bl) {
					this.requestFullScreen();
				} else {
					player.cancelFullScreen();
				}
			}
		},
		watch: {
			cTime: function(n, o) {
                n = parseInt(n + 1);
				if (this.timeupdate == undefined) return;
				this.step = this.step == undefined ? 1 : parseInt(this.step);
				if (n < this.step) return;
				if (n % this.step > 0) return;
				return this.timeupdate(n);
			}
		}
	}
</script>

<style>
.prism-player .prism-setting-selector .header {
    line-height: 35px!important;
}
.prism-player .prism-setting-selector .header span {
    line-height: 35px!important;
}
</style>
